import React, { Component } from 'react'
// import Tab from './../common/TabVertical'
import Content from '../common/Content'
import PublishNews from './../../components/focusNews/PublishNews'
import Page from '../common/Page'
import Empty from '../common/Empty'
import styles from './QA.module.scss'
import api from './../../serve/api'
import { withRouter } from 'react-router-dom'

class QA extends Component {

  constructor(props) {
    super(props)
    this.state = {
      QAs: [],
      pageTotal: '',
      page: 1,
      pageSize: 10
    }
  }
  

  getCurrentPage(currentPage) {
    this.getQAList(currentPage)
  }

  componentDidMount() {
    this.getQAList(this.state.page)
  }


  async getQAList(page) {
    const data = await api.listQaApi({ page, pageSize: this.state.pageSize })
    if (data && data.code === '000000') {
      this.setState({
        page,
        QAs: data.result || [],
        pageTotal: data.resultNum
      })
    }
  }

  onItem(item) {
    this.props.history.push(`/mainPage/commonDetail/qa/${item.id}`)
  }

  render() {
    const { QAs, page, pageTotal } = this.state
    const datas = QAs.map(item => {
      return {
        id: item.id,
        title: item.name
      }
    })
    return (
      <div className={styles.qa_container}>
        <div className={styles.crumbs}>
          <div className={styles.postion_div}>
            当前位置: 首页> 学者观点> <span>列表</span>
          </div>
        </div>
        <div className={styles.qa_content_container}>
          <div className={styles.qa_content}>
            {QAs.length === 0 && <Empty title="暂无数据" />}
            {QAs.length > 0 && <Content datas={datas} onItem={item => this.onItem(item)} />}
            {QAs.length > 0 && <Page 
              pageConfig={{totalPage: pageTotal, pageSize: this.state.pageSize, currentPage: page }}
              pageCallbackFn={currentPage => this.getCurrentPage(currentPage)}
            />}
          </div>
          <div className={styles.right_container}>
            <PublishNews datas={datas} onItem={item => this.onItem(item)} />
          </div>
        </div>
      </div>
    )
  }
}
export default withRouter(QA)